import { forwardRef, useImperativeHandle } from 'react'
import { Form, Input, InputNumber } from 'antd'

const FormConfig = forwardRef((props, ref) => {
    const [form] = Form.useForm()

    useImperativeHandle(ref, () => ({
        setFieldsValue: form.setFieldsValue,
        submit: () => form.validateFields(),
        reset: () => form.resetFields(),
    }))

    return (
        <Form
            form={form}
            name="basic"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            initialValues={{ remember: true }}
            autoComplete="off"
            layout="horizontal"
        >
            <Form.Item
                label="菜单名称"
                name="label"
                rules={[{ required: true, message: '请输入菜单名称' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="菜单路径"
                name="url"
                rules={[{ required: true, message: '请输入菜单路径' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="选择图标"
                name="icon"
                rules={[{ required: true, message: '请输入图标' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="排序"
                name="sort"
                rules={[{ required: true, message: '请填写' }]}
            >
                <InputNumber min={1} max={20} step={1} precision={0} />
            </Form.Item>
            <Form.Item label="key" name="key" hidden={true}>
                <Input />
            </Form.Item>
            <Form.Item label="parentKey" name="parentKey" hidden={true}>
                <Input />
            </Form.Item>
        </Form>
    )
})

export default FormConfig
